<template>
  <div class="category-panel">
    <div class="panel-header">
      <div class="title">商品分类</div>
      <a href="#" class="all-category">查看全部</a>
    </div>

    <div class="category-grid">
      <div v-for="(category, index) in categories" :key="index" class="category-item">
        <CategoryCard :category="category" />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import CategoryCard from '@/components/common/CategoryCard.vue'

// 分类数据
const categories = [
  { name: '手机数码', icon: 'phone', color: '#4FC3F7' },
  { name: '电脑办公', icon: 'laptop', color: '#FF7043' },
  { name: '家用电器', icon: 'tv', color: '#81C784' },
  { name: '美妆护肤', icon: 'lipstick', color: '#F06292' },
  { name: '食品生鲜', icon: 'food', color: '#FFCA28' },
  { name: '图书文娱', icon: 'book', color: '#BA68C8' },
  { name: '运动户外', icon: 'dumbbell', color: '#4DB6AC' },
  { name: '服饰鞋包', icon: 'shirt', color: '#FF8A65' },
  { name: '家居家装', icon: 'home', color: '#9575CD' },
  { name: '生活服务', icon: 'shopping-cart', color: '#7986CB' },
]
</script>

<style scoped lang="scss">
.category-panel {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  padding: 20px;
  margin-bottom: 20px;

  .panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;

    .title {
      font-size: 18px;
      font-weight: bold;
      position: relative;
      padding-left: 12px;

      &::before {
        content: '';
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 4px;
        height: 18px;
        background: linear-gradient(to bottom, #ff4e50, #f9d423);
        border-radius: 2px;
      }
    }

    .all-category {
      color: #666;
      font-size: 14px;
      text-decoration: none;

      &:hover {
        color: #f56c6c;
      }
    }
  }

  .category-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 15px;

    .category-item {
      text-align: center;
    }
  }
}
</style>
